<template>
    <div class="my-posts">
      <h2>我的发表</h2>
      <div v-if="posts.length > 0">
        <div v-for="post in posts" :key="post.id" class="post-item">
          <div class="post-header">
            <h3>{{ post.title }}</h3>
            <span class="post-time">{{ formatDate(post.date) }}</span>
          </div>
          <p class="post-content">{{ post.content }}</p>
          <div class="post-meta">
            <span class="post-category">分类: {{ post.category }}</span>
            <span class="post-likes">👍 {{ post.likes }}</span>
            <span class="post-comments">💬 {{ commentCounts[post.id] || 0 }}</span>
          </div>
        </div>
      </div>
      <div v-else>
        <p>暂无发表内容</p>
      </div>
    </div>
  </template>
  
  <script>
  import api from '@/api/api';
  
  export default {
    data() {
      return {
        posts: [],
        commentCounts: {} // 用于存储每篇帖子的评论数
      };
    },
    created() {
      this.fetchMyPosts();
    },
    methods: {
      fetchMyPosts() {
        api.getMyPosts()
          .then(response => {
            this.posts = response.data;
            this.fetchCommentCounts(); // 获取所有帖子的评论数
          })
          .catch(error => {
            console.error('获取我的发表失败:', error);
            this.$message.error('获取我的发表失败，请稍后再试');
          });
      },
      fetchCommentCounts() {
        // 使用 Promise.all 同时获取所有帖子的评论数
        const commentCountPromises = this.posts.map(post => {
          return api.getCommentCount(post.id)
            .then(response => {
              return { postId: post.id, count: response.data };
            });
        });
  
        Promise.all(commentCountPromises)
          .then(results => {
            results.forEach(result => {
              this.$set(this.commentCounts, result.postId, result.count);
            });
          })
          .catch(error => {
            console.error('获取评论数失败:', error);
          });
      },
      formatDate(dateString) {
        const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
        return new Date(dateString).toLocaleDateString('zh-CN', options);
      }
    }
  };
  </script>
  
  <style scoped>
  .my-posts {
    margin: 20px;
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .post-item {
    background-color: white;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 15px;
    border-left: 4px solid #409eff;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .post-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .post-time {
    color: #606266;
    font-size: 0.9em;
  }
  
  .post-content {
    line-height: 1.6;
    color: #303133;
  }
  
  .post-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    color: #606266;
    font-size: 0.9em;
  }
  
  .post-category {
    color: #409eff;
  }
  
  .post-likes, .post-comments {
    display: flex;
    align-items: center;
  }
  
  .post-likes::before, .post-comments::before {
    margin-right: 4px;
  }
  </style>